import React, { Component } from 'react'

export default class App extends Component {
	state = {
		username: '',
		context: '',
		ifram: 'Vue',
		sex: 'male',
		checkArr: [ 'apple' ]
	}
	handelChange = (e) => {
		let val
		if (e.target.type === 'checkbox') {
			val = e.target.checked
				? [ ...this.state.checkArr, e.target.value ]
				: [ ...this.state.checkArr ].filter((item) => item !== e.target.value)
		} else {
			val = e.target.value
		}

		this.setState((state, props) => {
			return {
				[e.target.name]: val
			}
		})
	}
	// handelCheck = (e) => {
	// 	let val
	// 	if (e.target.checked) {
	// 		val = [ ...this.state.checkArr, e.target.value ]
	// 	} else {
	// 		val = [ ...this.state.checkArr ].filter((item) => item !== e.target.value)
	// 	}
	// 	this.setState((state, props) => {
	// 		return {
	// 			[e.target.name]: val
	// 		}
	// 	})
	// }
	render() {
		const { username, context, ifram, sex, checkArr } = this.state
		return (
			<div>
				<ul style={{ listStyle: 'none', lineHeight: '50px' }}>
					<li>
						<label htmlFor="username">用户名:</label>
						<input
							id="username"
							name="username"
							type="text"
							value={username}
							onChange={this.handelChange}
						/>
					</li>
					<li>
						<label htmlFor="context">用户信息:</label>
						<textarea
							name="context"
							id="context"
							type="text"
							value={context}
							onChange={this.handelChange}
							style={{ height: '16px', backgroundColor: '#000', color: '#fff' }}
						/>
					</li>
					<li>
						<label htmlFor="context">框架:</label>
						<select name="ifram" value={ifram} onChange={this.handelChange}>
							<option id="Vue">Vue</option>
							<option id="React">React</option>
							<option id="Aug">Aug</option>
						</select>
					</li>
					<li>
						<input
							name="sex"
							type="radio"
							id="male"
							value="male"
							onChange={this.handelChange}
							checked={sex === 'male'}
						/>
						<label htmlFor="male">男</label>
						<input
							name="sex"
							type="radio"
							id="female"
							value="female"
							checked={sex === 'female'}
							onChange={this.handelChange}
						/>
						<label htmlFor="female">女</label>
						<input
							name="sex"
							type="radio"
							id="unknown"
							value="unknown"
							checked={sex === 'unknown'}
							onChange={this.handelChange}
						/>
						<label htmlFor="unknown">未知</label>
					</li>
					<li>
						<input
							name="checkArr"
							type="checkbox"
							id="apple"
							value="apple"
							checked={checkArr.includes('apple')}
							onChange={this.handelChange}
						/>
						<label htmlFor="apple">苹果</label>
						<input
							name="checkArr"
							type="checkbox"
							id="orange"
							value="orange"
							checked={checkArr.includes('orange')}
							onChange={this.handelChange}
						/>
						<label htmlFor="orange">橙子</label>
					</li>
				</ul>
			</div>
		)
	}
}
